<template>
   <div class="newBox">
    <button class="bt wt-120" @click="handleBulid()">
        新增护理项目
    </button>
</div>
  <div class="baseList">
    <div class="tableBoxs">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table 
        :row-key="rowKey" 
        :data="data" 
        :columns="COLUMNS" 
        vertical-align="middle"
        :hover="hover"
        :loading="dataLoading"
        tabel-content-width="100%"
        table-layout="fixed"
        >
        <!-- 序号 -->
        <template   #rowIndex="{ rowIndex }">{{  (pagination.pageNum-1)*pagination.pageSize+rowIndex+1 }}</template>
       <!-- 图片预览 -->
        <template #image="{ row }">
          <div>
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                      <span>
                        <BrowseIcon size="1.4em" /> 预览
                      </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </div>
        </template>
        <!-- 价格拼接 -->
        <template #price="{ row }">
          {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
        </template>

        <!-- 按钮处理 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a class="btn-dl" :class="row.count ? 'disabled' : ''"  @click="handleClickDelete(row)">删除</a>
            <a class="font-bt"  @click="handleEdit(row)">编辑</a>
            <a class="delete" :class="
                row.count && row.status === 1
                  ? 'disabled btn-dl'
                  : row.status === 1
                  ? 'btn-dl'
                  : 'font-bt'
              " @click="handleForbidden(row)">{{ row.status===1? '禁用':'启用'}}</a>
          </div>
        </template>
      </t-table>
       <!-- 分页 -->
      <t-pagination
        v-if="total > 1"
        v-model="pagination.pageNum"
        v-model:pageSize="pagination.pageSize"
        :total="total"
        @change="onPageChange"
      />
    </div>
  </div>
</template>

<script setup lang="jsx">
import { COLUMNS } from '../constants'

/* 接收父组件传递过来的属性 */
const props=defineProps({
data:{
    type:Object,//定义类型
    default:()=>{}//给默认初始化值，为空
},
total:Number,
pagination:{
    type:Object,//定义类型
    default:()=>{}//给默认初始化值，为空
},
dataLoading:{
    type:Boolean,
    default:false
}
})
/* 定义接收父组件传递过来的方法 */
const emit=defineEmits(['onPageChange','handleBulid','handleEdit','handleClickDelete','handleForbidden'])
/* 执行单击触发翻页事件 */
const onPageChange=(val)=>{
emit('onPageChange',val)
}
//新增按钮传递过来的方法
const handleBulid =()=>{
  emit('handleBulid')
} 
const handleEdit=(row)=>{
  emit('handleEdit',row)
}

//判断当前参数是否包含小数点
const isDecimals = (val) => {
if (String(val).indexOf('.') > -1) {
  return true;
}
return false;
}
//点击删除
const handleClickDelete =(val)=>{
if(!val.count){
  emit('handleClickDelete', val);
}
}
const handleForbidden = (val) => {

  if (!val.count) {
    emit('handleForbidden', val)
  }
}
</script>